<div v-bind:class="[componentId]">
    <cly-header>
		<template v-slot:header-top >
			<cly-back-link v-if="subPage" link="#/manage/data-points" :title ="i18n('common.back')"></cly-back-link>
		</template>
        <template v-slot:header-left>
            <h2> {{title}}</h2>
            <span v-if="!app_id" class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-3" v-tooltip.top-center="description"></span>
        </template>
    </cly-header>
	<cly-main>
		<div v-if="!subPage" class="bu-level-left">
			<h4>{{i18n('server-stats.data-points-last_hours')}}</h4>
		</div>
		<cly-section v-if="!subPage" class="bu-mt-4">
			<cly-metric-cards :multiline="false" v-loading="isLoading" style="min-height:100px;">
				<cly-metric-card formatting="long" :is-percentage="false" :box-type="3" :label="item.name" color="#097EFF" numberClasses="bu-is-flex bu-is-align-items-center" :key="idx" v-for="(item, idx) in topApps">
					<template v-slot:number>{{item.value}}</template>
				</cly-metric-card>
				
			</cly-metric-cards>
		</cly-section>
		<cly-section>
			<cly-date-picker-g class="bu-m-5"></cly-date-picker-g>
			<cly-chart-bar v-if="useBasicGraph" :legend="{show:false}" :option="dataPointsGraph" :height="520" v-loading="isLoading" :force-loading="isLoading"></cly-chart-bar>
			<cly-chart-generic v-else :height="520"  :option="dataPointsGraph" v-loading="isLoading" :force-loading="isLoading"></cly-chart-generic>
        </cly-section>
		
		<cly-section>
            <cly-datatable-n  :rows="dataPointsRows" :resizable="true" v-loading="isLoading" :force-loading="isLoading" :default-sort="{prop: 'data-points', order: 'descending'}">
				<el-table-column min-width="200" type="clickable" sortable="custom" prop="appName" :show-overflow-tooltip="true" :label="i18n('compare.apps.app-name')" fixed="left">
					<template slot-scope="scope">
						<a v-if="!subPage && scope.row.appId" :href='"#/manage/data-points/" +scope.row.appId'>{{scope.row.appName}}</a>
						<span v-else class="i_am_not_clickable">{{scope.row.appName}}</span>
					</template>
				</el-table-column>
				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="sessions" :label="i18n('sidebar.analytics.sessions')">
					<template v-slot:header>
						{{i18n('sidebar.analytics.sessions')}}
						<span class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-1" v-tooltip.top-center="i18n('server-stats.sessions-description')"></span>
					</template>
				</el-table-column>
				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="events" :label="i18n('sidebar.events')">
					<template v-slot:header>
						{{i18n('sidebar.events')}}
						<span class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-1" v-tooltip.top-center="i18n('server-stats.events-description')"></span>
					</template>
				</el-table-column>
				<el-table-column min-width="150" v-if="showPushColumn" :formatter="numberFormatter" sortable="custom" prop="push" :label="i18n('push-notification.title')"></el-table-column>
				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="data-points" :label="i18n('server-stats.data-points')"></el-table-column>
				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="change" :label="i18n('server-stats.datapoint-change')"></el-table-column>
			</cly-datatable-n>
		</cly-section>
	</cly-main>
</div>


